<template>
  <view class="orders-container">
    <!-- 订单类型选项卡 -->
    <view class="tab-bar">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        class="tab-item"
        :class="{ active: currentTab === index }"
        @tap="switchTab(index)"
      >
        {{ tab }}
      </view>
    </view>

    <!-- 订单列表 -->
    <scroll-view 
      class="order-list" 
      scroll-y 
      @scrolltolower="loadMore"
    >
      <view 
        class="order-item"
        v-for="(order, index) in orders"
        :key="index"
      >
        <!-- 订单头部 -->
        <view class="order-header">
          <text class="order-type">{{ order.type }}</text>
          <text class="order-status">{{ order.status }}</text>
        </view>

        <!-- 订单内容 -->
        <view class="order-content">
          <image :src="order.image" mode="aspectFill" class="order-image"></image>
          <view class="order-info">
            <text class="title">{{ order.title }}</text>
            <text class="desc">{{ order.description }}</text>
            <view class="price-box">
              <text class="price">¥{{ order.price }}</text>
              <text class="count">x{{ order.count }}</text>
            </view>
          </view>
        </view>

        <!-- 订单底部 -->
        <view class="order-footer">
          <text class="total">合计：¥{{ order.total }}</text>
          <view class="btn-group">
            <button 
              class="btn" 
              v-if="order.status === '待支付'"
              @tap="handlePay(order)"
            >立即支付</button>
            <button 
              class="btn outline" 
              v-if="order.status === '待评价'"
              @tap="handleComment(order)"
            >评价</button>
            <button 
              class="btn outline" 
              @tap="handleDetail(order)"
            >查看详情</button>
          </view>
        </view>
      </view>

      <!-- 加载更多 -->
      <view class="loading" v-if="loading">
        <text>加载中...</text>
      </view>
      <view class="no-more" v-if="!hasMore && orders.length > 0">
        <text>没有更多了</text>
      </view>
      <view class="empty" v-if="!loading && orders.length === 0">
        <text>暂无订单</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['全部', '待支付', '待就医', '待评价', '已完成'],
      currentTab: 0,
      orders: [],
      page: 1,
      loading: false,
      hasMore: true
    }
  },

  onLoad() {
    this.loadOrders()
  },

  methods: {
    switchTab(index) {
      if (this.currentTab === index) return
      this.currentTab = index
      this.orders = []
      this.page = 1
      this.hasMore = true
      this.loadOrders()
    },

    async loadOrders() {
      if (this.loading || !this.hasMore) return
      
      this.loading = true
      try {
        // TODO: 替换为实际的API调用
        // const res = await api.getOrders({
        //   type: this.tabs[this.currentTab],
        //   page: this.page
        // })
        const mockOrders = [
          {
            id: 1,
            type: '体检套餐',
            status: '待支付',
            title: '标准体检套餐A',
            description: '适合25-45岁人群的基础体检套餐',
            image: '/static/images/checkup1.jpg',
            price: 599,
            count: 1,
            total: 599
          }
        ]
        
        if (this.page === 1) {
          this.orders = mockOrders
        } else {
          this.orders = [...this.orders, ...mockOrders]
        }
        
        this.hasMore = mockOrders.length === 10 // 假设每页10条
        this.page++
      } catch (error) {
        console.error('加载订单失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },

    loadMore() {
      this.loadOrders()
    },

    handlePay(order) {
      // TODO: 实现支付功能
      uni.showModal({
        title: '提示',
        content: '确认支付？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '支付成功',
              icon: 'success'
            })
          }
        }
      })
    },

    handleComment(order) {
      // TODO: 跳转到评价页面
      uni.showToast({
        title: '评价功能开发中',
        icon: 'none'
      })
    },

    handleDetail(order) {
      // TODO: 跳转到订单详情页面
      uni.showToast({
        title: '详情页面开发中',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss">
.orders-container {
  min-height: 100vh;
  background: #f5f5f5;

  .tab-bar {
    display: flex;
    background: #fff;
    padding: 20rpx 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    
    .tab-item {
      flex: 1;
      text-align: center;
      font-size: 28rpx;
      color: #333;
      position: relative;
      
      &.active {
        color: #007AFF;
        font-weight: bold;
        
        &::after {
          content: '';
          position: absolute;
          bottom: -10rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 40rpx;
          height: 4rpx;
          background: #007AFF;
          border-radius: 2rpx;
        }
      }
    }
  }

  .order-list {
    padding: 100rpx 30rpx 30rpx;
    
    .order-item {
      background: #fff;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
      overflow: hidden;
      
      .order-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        border-bottom: 1rpx solid #f5f5f5;
        
        .order-type {
          font-size: 28rpx;
          color: #333;
          font-weight: bold;
        }
        
        .order-status {
          font-size: 26rpx;
          color: #007AFF;
        }
      }
      
      .order-content {
        display: flex;
        padding: 20rpx;
        
        .order-image {
          width: 160rpx;
          height: 160rpx;
          border-radius: 8rpx;
          margin-right: 20rpx;
        }
        
        .order-info {
          flex: 1;
          
          .title {
            font-size: 28rpx;
            color: #333;
            font-weight: bold;
            margin-bottom: 10rpx;
            display: block;
          }
          
          .desc {
            font-size: 24rpx;
            color: #666;
            margin-bottom: 20rpx;
            display: block;
          }
          
          .price-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            .price {
              font-size: 32rpx;
              color: #ff4d4f;
              font-weight: bold;
            }
            
            .count {
              font-size: 24rpx;
              color: #999;
            }
          }
        }
      }
      
      .order-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        border-top: 1rpx solid #f5f5f5;
        
        .total {
          font-size: 28rpx;
          color: #333;
          font-weight: bold;
        }
        
        .btn-group {
          display: flex;
          
          .btn {
            margin-left: 20rpx;
            height: 60rpx;
            line-height: 60rpx;
            padding: 0 30rpx;
            font-size: 26rpx;
            border-radius: 30rpx;
            background: #007AFF;
            color: #fff;
            
            &.outline {
              background: #fff;
              color: #007AFF;
              border: 1rpx solid #007AFF;
            }
          }
        }
      }
    }
    
    .loading,
    .no-more,
    .empty {
      text-align: center;
      padding: 30rpx;
      
      text {
        font-size: 26rpx;
        color: #999;
      }
    }
  }
}
</style> 